<template>
  <a-form auto-label-width layout="inline" size="mini">
    <Label :options="option?.label" />
    <template v-for="item in option.metrics" :key="item.id">
      <div class="flex flex-wrap mb-3 component-box">
        <div class="flex justify-between p-1">
          {{ item.name }}
          <a-button size="small" type="text" @click="handleClick(item)">高级配置</a-button>
        </div>
        <div class="">
          <a-form-item label="图表类型">
            <div class="flex w-full">
              <a-select class="w-3/5" v-model="item.type">
                <a-option label="柱状图" value="bar" />
                <a-option label="折线图" value="line" />
              </a-select>
              <!--              <a-button class="w-2/5" size="mini" v-if="item.label.show" type="text" @click="handleClickLabel(item)">-->
              <!--                图形配置-->
              <!--              </a-button>-->
            </div>
          </a-form-item>
          <a-form-item label="图形颜色">
            <xiri-form v-model="item.itemStyle.color" option="linearColor" />
          </a-form-item>
          <a-form-item label="显示标签">
            <a-switch size="small" v-model="item.label.show" />
            <a-button size="small" v-if="item.label.show" type="text" @click="handleClickLabel(item)">
              标签配置
            </a-button>
          </a-form-item>
          <a-form-item label="多Y轴">
            <a-input-number size="small" min="0" :max="item.index" v-model="item.yAxisIndex" />
          </a-form-item>
        </div>
      </div>
    </template>
  </a-form>
  <a-drawer :visible="visible" :title="metricsForm.name + ' 高级设置'" :footer="false" @cancel="visible = !visible">
    <a-form v-if="metricsForm.name" auto-label-width>
      <div class="component-box">
        <div class="title-desc">图表标注</div>
        <a-form-item label="展示最大值" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markPoint.option.max.show" />
        </a-form-item>
        <a-form-item label="展示最小值" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markPoint.option.min.show" />
        </a-form-item>
        <a-form-item label="展示平均值" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markPoint.option.average.show" />
        </a-form-item>
      </div>
      <div class="component-box">
        <div class="title-desc">图表标线</div>
        <a-form-item label="展示最大值" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markLine.option.max.show" />
        </a-form-item>
        <a-form-item label="展示最小值" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markLine.option.min.show" />
        </a-form-item>
        <a-form-item label="展示平均值" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markLine.option.average.show" />
        </a-form-item>
        <a-form-item label="展示中位数" class="mb-0">
          <a-switch size="small" v-model="metricsForm.markLine.option.median.show" />
        </a-form-item>
      </div>
    </a-form>
  </a-drawer>
  <a-drawer v-model:visible="visibleLabel" :title="metricsForm.name + ' 标签设置'" :footer="false" sizeDraggable>
    <a-form v-if="metricsForm.name">
      <Label :options="metricsForm.label" />
    </a-form>
  </a-drawer>
</template>
<script setup>
import Label from "@/plugins/common/options/label.vue"

defineOptions({
  name: "echarts-label"
})
const attrs = useAttrs()
const option = attrs.option
const visible = ref(false)
const metricsForm = ref("")
const handleClick = (item) => {
  visible.value = true
  metricsForm.value = item
}

const visibleLabel = ref(false)
const labelForm = ref("")
const handleClickLabel = (item) => {
  visibleLabel.value = true
  metricsForm.value = item
}
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
.t-drawer__body {
  padding: 0 !important;
}
</style>
